<template>
  <div>
    <!-- 输入框 -->
    <div class="seclector">
      <div style="width: 200px">
        <el-input v-model="input" placeholder="请输入内容" @input="inputtext"></el-input>
      </div>
    </div>
    <!-- 查询 -->
    <div class="buttons">
      <el-button icon="el-icon-search" type="primary" @click="queryMethod">查询</el-button>
      <el-button @click="clear">清空</el-button>
    </div>
    <!-- 添加 删除 -->
    <div class="addbuttons">
      <el-button type="primary" icon="el-icon-search" @click="addUserList()">添加</el-button>
      <!-- <el-button type="danger">批量删除</el-button> -->
    </div>
    <!-- 内容区 -->
    <div class="conatiner">
      <el-table border ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="日期" width="164">
          <template slot-scope="scope">{{ scope.row.time }}</template>
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="description" label="描述" show-overflow-tooltip>
        </el-table-column>
        <!-- 表格里的按钮 -->
        <el-table-column label="操作" width="230" align="center">
          <template slot-scope="{ row }">
            <HintButton type="info" size="mini" icon="el-icon-user-solid" title="分配角色" @click="showAssignRole(row)" />

            <HintButton type="primary" size="mini" icon="el-icon-edit" title="修改用户" @click="showUptimeUser(row)" />

            <HintButton title="删除用户" style="margin-left: 10px" type="danger" size="mini" icon="el-icon-delete"
              @click="removeUser(row.id)" />
            <!-- 这里不知道为什么不生效
               <el-popconfirm title="这是一段内容确定删除吗？">
              <HintButton  style="margin-left: 10px" slot="reference" type="danger" size="mini" icon="el-icon-delete" title="删除用户"/>
            </el-popconfirm> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="Pager">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNo"
        :page-sizes="[1, 2, 3]" :page-size="pageSize" layout=" prev, pager, next, jumper, ->, sizes,total"
        :total="total" style="text-align:center;">
      </el-pagination>
    </div>
    <!-- 修改对话框 -->
    <template>
      <div>
        <el-dialog title="修改用户" :visible.sync="dialogFormVisible">
          <el-form :model="form" :rules="rules" ref="ruleForm" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
              <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>

            <el-form :model="form" :rules="rules" ref="ruleForm" class="demo-ruleForm">
              <el-form-item label="用户描述" :label-width="formLabelWidth" prop="description">
                <el-input v-model="form.description" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogForm()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    <!-- 添加对话框 -->
    <template>
      <div>
        <el-dialog title="添加用户" :visible.sync="dialogFormVisibles">
          <el-form :model="addUserListS" :rules="rules" ref="ruleForm" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
              <el-input v-model="addUserListS.username" autocomplete="off"></el-input>
            </el-form-item>

            <!-- <el-form
              :model="addUserListS"
              :rules="rules"
              ref="ruleForm"
              class="demo-ruleForm"
            > -->
            <el-form-item label="用户描述" :label-width="formLabelWidth" prop="description">
              <el-input v-model="addUserListS.description" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibles = false">取 消</el-button>
            <el-button type="primary" @click="saveUsers">保存</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    <!-- 分配对话框 -->
    <template>
      <div>
        <el-dialog title="分配用户" :visible.sync="dialogFormVisiblesd">
          <el-form :model="saveLists" :rules="rules" ref="ruleForm" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
              <el-input :disabled = 'disabled'  v-model="saveLists.username" autocomplete="off"></el-input>
            </el-form-item>

            <el-form :model="saveLists" :rules="rules" ref="ruleForm" class="demo-ruleForm">
              <el-form-item label="用户描述" :label-width="formLabelWidth" prop="description">
                <el-input :disabled = 'disabled' v-model="saveLists.description" autocomplete="off"></el-input>
              </el-form-item>
              <!-- 复选框 -->
              <div style="margin-left:50px" >
                <p>角色列表</p>
                <!-- <el-checkbox :indeterminate="isIndeterminate" 
              v-model="checkAll" @change="handleCheckAllChange">
                全选</el-checkbox> -->
                <!-- 权限修改区域 -->
                <div style="margin: 15px 0;"></div>
                <el-radio-group v-model="radio">
                  <el-radio :label="role.id" v-for="role in roles" :key="role.id" :aria-checked="role.id==2" 
                     @change="handlerChange">
                    {{role.roleName}}</el-radio>
                </el-radio-group>
              </div>
            </el-form>
          </el-form>
        </el-dialog>
      </div>
    </template>
    <!-- 搜索查询 -->
    <template>
      <div>
        <el-dialog title="搜索用户" :visible.sync="dialogFormVisiblesds">
          <el-form :model="inputQuery" :rules="rules" ref="ruleForm" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
              <el-input v-model="inputQuery.username" autocomplete="off"></el-input>
            </el-form-item>

            <el-form :model="inputQuery" :rules="rules" ref="ruleForm" class="demo-ruleForm">
              <el-form-item label="用户描述" :label-width="formLabelWidth" prop="description">
                <el-input v-model="inputQuery.description" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
          </el-form>
        </el-dialog>
      </div>
    </template>
  </div>
</template>


<script>
  export default {
    name: "User",
    data() {
      return {
        // 下拉框数据
        options: [],
        disabled: true,
        // 搜索框内容
        value: [],
        // 表格内容
        tableData: [],
        saveLists: {}, //保存
        inputQuery: {}, //搜索
        dialogFormVisible: false, // 是否显示角色Dialog
        dialogFormVisibles: false,
        dialogFormVisiblesd: false,
        dialogFormVisiblesds: false, //搜索
        multipleSelection: [],
        // 对话框
        form: {
          username: "",
          time: "",
          delivery: false,
          type: [],
          description: "",
          id: "", //用户id
        },
        id: "",
        // 保存用的数组
        addUserListS: {
          username: "",
          time: "",
          delivery: false,
          type: [],
          description: "",
        },
        formLabelWidth: "120px",
        input: "",
        user: {}, //储存修改的对象
        // 验证表单
        ruleForm: {
          username: [{
              required: true,
              message: '请输入姓名',
              trigger: 'blur'
            },
            {
              min: 5,
              max: 10,
              message: "长度在 5 到 10 个字符",
              trigger: "blur",
            },
          ],
          time: "",
          delivery: false,
          type: [],
          description: "",
          id: "", //用户id
        },
        // 验证规则
        rules: {
          username: [{
              required: true,
              message: "请输入用户名",
              trigger: "blur"
            },
            {
              min: 5,
              max: 10,
              message: "长度在 5 到 10 个字符",
              trigger: "blur",
            },
          ],
          description: [{
              required: true,
              message: "请输入用户名",
              trigger: "blur"
            },
            {
              min: 5,
              max: 50,
              message: "长度在 5 到 50 个字符",
              trigger: "blur",
            },
          ],
        },
        // 收集输入框数据
        inpuntVal: {},
        roles: [],
        radio: 0,
        isIndeterminate: true,
        total: 0, //总页数
        pageNo: 1, //第几页
        pageSize: 2, //是每页多少条
        changeRoleId: '',
      };
    },
    methods: {
      // 输入框的方法
      inputtext(valued) {
        // console.log(valued)
        this.inpuntVal = {
          valued
        };
        // console.log(this.inpuntVal)
        // // 存储输入框数据
        this.value.push(event.data);
      },
      // 查询方法
      async queryMethod() {
        // console.log(this.inpuntVal);
        let result = await this.$API.user.selectUser({
          username: this.inpuntVal.valued,
        });
        if (result.code !== 200) {
          alert("请求失败");
        }

        return (
          (this.inputQuery = result.data),
          console.log(this.inputQuery),
          (this.dialogFormVisiblesds = true)
        );
      },
      // 清空
      clear() {
        (this.value = []), (this.input = "");
      },
      // 复选框方法
      handleSelectionChange(val) {
        // console.log(val)
        this.multipleSelection = val;
      },
      // 分页器显示几条每页
      handleSizeChange(val) {
        this.pageSize = val
        // console.log(`每页 ${val} 条`);
        let dispage = this.UserList(this.pageSize)
      },
      // 前往那页
      async handleCurrentChange(val) {
        this.pageNo = val
        this.UserList()
      },
      // 分配
      async showAssignRole(row) {
        this.changeRoleId = row.id
        this.saveLists = row;
        // 查询权限
        const result = await this.$API.roles.findRole(row.id);
        console.log(result)
        this.radio = result.id;
        // if(this.radio == 0){
        //   this.disabled = true
        // }else {
        //   this.disabled = false
        // }
        //  if(this.radio == 0){
        //   this.disabled = true
        // }
        this.dialogFormVisiblesd = true;
      },
      // 修改
      showUptimeUser(row) {
        // console.log(row);
        this.from = row;
        // console.log(this.from)
        this.form.username = row.username;
        this.form.description = row.description;
        this.form.id = row.id;
        // console.log(this.form.id);
        this.user = this.form;
        this.ruleForm = this.form;
        // console.log(this.ruleForm.username)
        // console.log(this.user)
        this.dialogFormVisible = true;
      },
      // 修改的确定
      dialogForm() {
        if (this.ruleForm.username == "") {
          alert("请按按规则输入");
          return false;
        }
        this.modifyUser(this.user);
        this.dialogFormVisible = false;
      },
      // 删除
      removeUser(row) {
        this.id = row;
        console.log(this.id);
        //  await this.$API.user.delUser(row)
        // this.UserList();
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(async () => {
            await this.$API.user.delUser(this.id);
            this.UserList();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      // 获取用户列表
      // pageNo是第几页,pageSize是每页多少条
      async UserList() {
        let result = await this.$API.user.getUserInfo(this.pageNo, this.pageSize);
        if (result.code !== 200) {
          alert("网络出错了,请按F12");
        } else {
          // console.log(result);
          this.total = result.total
          if (result.total) {
            this.tableData = result.result;
            return
          }
          this.tableData = result.adminUser;
          // console.log(this.tableData);
        }
      },
      // 修改用户
      async modifyUser(user) {
        // console.log("修改");
        let result = await this.$API.user.editUser({
          id: this.form.id,
          data: user,
        });
        if ((result.msg = "修改成功!")) {
          this.UserList();
        }
      },
      // 添加
      addUserList() {
        this.dialogFormVisibles = true;
      },
      // 添加保存
      async saveUsers() {
        if (!this.addUserListS.username || !this.addUserListS.description) {
          alert("请输入内容");
          return false;
        }
        if (/.*[\u4e00-\u9fa5]+.*$/.test(this.addUserListS.username)) {
          alert('不能含有中文!!')
          return false
        }
        let result = await this.$API.user.addUser(this.addUserListS);
        if (result.code == 201) {
          alert(result.msg)
          return false
        }
        this.dialogFormVisibles = false;
        this.addUserListS = {};
        this.UserList();
      },
      // 修改权限
      handlerChange(value) {
        this.$API.roles.editRoles(this.changeRoleId, value);
      },
      // 获取用户信息
      async getRoles() {
        const result = await this.$API.roles.getRoles()
        this.roles = result.roles;
      }
    },
    mounted() {
      this.UserList();
      this.getRoles()
    },
  };

</script>

<style lang="css" scoped>
  .seclector {
    margin-left: 50px;
    margin-top: 50px;
    position: relative;
  }

  .buttons {
    position: absolute;
    top: 50px;
    left: 275px;
  }

  .addbuttons {
    position: relative;
    left: 50px;
    top: 30px;
    margin-bottom: 50px;
  }

  .conatiner {
    width: 1200px;
    position: relative;
    left: 50px;
  }

  .Pager {
    width: 1200px;
    margin-top: 20px;
    margin-left: 50px;
  }

</style>
